<template>
    <div class="main" v-loading="loading">
        <div class="aside">
            <div>
                <el-card class="box-card nav-card" :body-style="{padding:'1em'}">
                    <div slot="header" class="clearfix">
                        <div class="title">{{data.mold.title}}</div>
                        <div class="suffix">
                            <p title="">{{data.mold.intro}}</p>
                        </div>
                    </div>
                    <div class="block">
                        <el-rate v-model="data.mold.stars" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                    </div>
                </el-card>
            </div>
            <div class="ic" style="padding: 10px;">
                <div class="icon-list" v-for="(item,index) in data.code" v-bind:key="index">
                    <el-button type="info" size="mini" plain style="padding:7px;" v-if="index != choose" @click="choose = index;options.lineNumbers = true"><i class="fa fa fa-circle" :style="global.color(index,color)"></i> {{item.title}}</el-button>
                    <el-button type="info" size="mini" plain style="padding:7px;" v-else @click="choose = null;options.lineNumbers = false"><i class="el-icon-success" style="color:#2185d0"></i> {{item.title}}</el-button>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="fl search">
                <el-input placeholder="搜索代码" @change.native="onSearch()" prefix-icon="el-icon-search" size="small" v-model="search"></el-input>
            </div>
            <div class="fl btn"><el-button type="success" size="mini" icon="fa fa-floppy-o" @click="onSubmit()"> 保存</el-button></div>
            <div class="fl btn"><el-button size="mini" icon="el-icon-plus" @click="dialogAdd = true">添加</el-button></div>
        </div>
        <div class="container">
            <el-row :gutter="22" class="item-box" v-if="choose === null">
                <el-col :span="8" v-for="(item,index) in data.code" v-bind:key="index" class="list">
                    <el-card class="box-card" :body-style="{padding:'8px 8px 0 8px'}">
                        <div class="title">
                            <el-dropdown class="fr set" @command="handleCommand">
                                <div class="el-dropdown-link"><i class="el-icon-more el-icon--right"></i> &nbsp;</div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="index+',edit'">编辑</el-dropdown-item>
                                    <el-dropdown-item :command="index+',max'">最大化</el-dropdown-item>
                                    <el-dropdown-item :command="index+',del'">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <div>{{item.title}}&nbsp;</div>
                        </div>
                        <div>
                            <codemirror v-model="item.code" :options="options" class="code-con"></codemirror>
                        </div>
                        <div class="suffix">{{item.intro}}</div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="22" class="item-box" v-else>
                <el-col :span="24" class="list">
                    <el-card class="box-card" :body-style="{padding:'8px 8px 0 8px'}">
                        <div class="title">
                            <el-dropdown class="fr set" @command="handleCommand">
                                <div class="el-dropdown-link"><i class="el-icon-more el-icon--right"></i> &nbsp;</div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="choose+',edit'">编辑</el-dropdown-item>
                                    <el-dropdown-item :command="choose+',restore'">还原</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <div>{{data.code[choose].title}}&nbsp;</div>
                        </div>
                        <div>
                            <codemirror v-model="data.code[choose].code" :options="options" class="code-con max-con"></codemirror>
                        </div>
                        <div class="suffix">{{data.code[choose].intro}}</div>
                    </el-card>
                </el-col>
            </el-row>
            <el-dialog title="添加词条" :visible.sync="dialogAdd" width="350px">
                <el-form ref="form" :model="addData" :rules="rules" label-width="0px">
                    <el-form-item prop="title" label="" :rules="rules.title">
                        <el-input v-model="addData.title" placeholder="标题"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addData.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" style="width:100%" @click="onAdd()">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="修改词条" :visible.sync="dialogEdit" width="350px">
                <el-form ref="form" :model="editData" :rules="rules" label-width="0px">
                    <el-form-item prop="title" label="" :rules="rules.title">
                        <el-input v-model="editData.title" placeholder="标题"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="editData.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" style="width:100%" @click="onModify()">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { codemirror } from 'vue-codemirror-lite'
require('codemirror/mode/javascript/javascript')
import {axget,axpost} from '@/components/api/index'
export default {
    components: {
        codemirror
    },
    data(){
        return {
            params:this.$route.query,
            search:'',
            loading:false,
            dialogAdd:false,
            dialogEdit:false,
            addData:{id:'',title:'',intro:'',code:''},
            editData:{},
            data:{
                mold:{
                    stars:5,title:'',intro:''
                },
                code:[]
            },
            choose: null,
            options:{
                lineNumbers: false,
                mode: 'javascript',
                height:600
            },
            color:[
                '#fbbd08','#409EFF','#e03997','#21ba45','#67C23A','#F56C6C','#E6A23C'
            ],
            rules:{
                title : [{required: true, message: '标题不能为空', trigger: 'blur'}]
            }
        }
    },
    methods:{
        onLoad(){
            let param = {
                id:this.params.id
            }
            this.loading = true
            axpost('/note_mold/get_one',param).then(res => {
                let data = res.data
                if(res.status === 200 && data.status === 200){
                    this.data.mold = data.result
                }
                this.loading = false
            }).catch(()=>{
                this.loading = false
            })
            param = {
                id:this.params.id,
                search:this.search
            }
            axpost('/codes/get_list',param).then(res=>{
                let data = res.data
                if(res.status === 200){
                    if(data.status === 200 || data.status === 201){
                        this.data.code = data.result
                    }
                }
                this.loading = false
            }).catch(()=>{
                this.loading = false
            })
        },
        onSubmit(){
            this.loading = true
            axpost('/codes/modify_all',this.data).then(res=>{
                let data = res.data
                if(res.status === 200 && data.status === 200){
                    this.dialogEdit = false
                    this.$notify({title:'提示',message:'保存成功',type:"success"})
                }else{
                    this.$notify({title:'提示',message:'保存失败,请稍后再试',type:"warning"})
                }
                this.loading = false
            }).catch(res=>{
                this.loading = false
                this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
            })
        },
        onSearch(){
            this.onLoad()
        },
        onDel(id = 0,index = 0){
            this.$confirm('删除词条, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {
                    id:id
                }
                axpost('/codes/del',param).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.data.code.splice(index,1)
                        this.$notify({title:'提示',message:'删除成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'删除失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }).catch(()=>{
                //取消
            })
        },
        onAdd(){
            this.addData.id = this.params.id
            if(!this.addData.title){
                this.$notify({title:'提示',message:'标题不能为空',type:'warning'})
            }else{
                axpost('/codes/add',this.addData).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.dialogAdd = false
                        this.addData = { title:'' ,intro:'' ,code:'' }
                        this.data.code.unshift(data.result)
                        this.$notify({title:'提示',message:'添加成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'添加失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }
        },
        onModify(){
            if(!this.editData.title){
                this.$notify({title:'提示',message:'标题不能为空',type:'warning'})
            }else{
                axpost('/codes/modify',this.editData).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.dialogEdit = false
                        this.$notify({title:'提示',message:'修改成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'修改失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }
        },
        edit(index){
            this.dialogEdit = true
            this.editData = this.data.code[index]
        },
        handleCommand(index){
            let param = index.split(',')
            let serial = param[0]
            let type = param[1]
            let item = this.data.code[serial]
            if(type == 'edit'){
                this.edit(serial)
            }else if(type == 'max'){
                this.choose = serial
                this.options.lineNumbers = true
            }else if(type == 'del'){
                this.onDel(item.ID,serial)
            }else if(type == 'restore'){
                this.choose = null
                this.options.lineNumbers = false
            }else{
                return
            }
        }
    },
    created(){
        this.onLoad()
    }
}
</script>
<style lang="scss" scoped>
.code-con{
    width: 99%;
    // border: solid 1px gainsboro;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}
.code-con .CodeMirror {
    height:auto;
}
.main{
    height: 100%;
}
.main .aside{
    width: 260px;
    box-shadow: 3px 0 6px 0 rgba(0,0,0,.05), 3px 0 15px 0 rgba(0,0,0,.1);
    height: 100%;
    position: fixed;
    visibility: visible;
}
.main .header{
    width: calc(100% - 260px);
    border-bottom: 1px solid rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    height: 42px;
    margin-bottom: 10px;
    margin-left: 260px;
    padding: 9px 10px 0;
}
.header .search{
    width: 250px;
}
.header .btn{
    margin: 2.3px 0 0 10px;
}
.main .container{
    min-width: 1150px;;
}
.container .item-box{
    width: calc(100% - 260px);
    margin-left: 260px !important;
    height: 82vh;
    overflow: overlay;
    padding-right: 13px;
}
.container .item-box::-webkit-scrollbar-thumb{
    display: block;
    width: 2px;
    margin: 0 auto;
    border-radius: 30px;
    background: #409EFF;
}
.container .item-box::-webkit-scrollbar { 
    width: 2px;
    height: 2px;
    background: #ccc;
}
.ic .icon-list{
    float: left;
    margin-right: 10px;
    margin-bottom: 8px;
}
.clearfix{
    margin-bottom: -1px;
    overflow: hidden;
}
.nav-card .title{
    font-weight: bold;
    font-size: 17px;
    margin-top: -.21425em;
    line-height: 1.28571429em;
    font-family: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
    color: rgba(0,0,0,.68);
}
.nav-card .suffix{
    margin-top: .5em;
    font-size: 12px;
}
.item-box{
    width: 100%;
}
.item-box .list{
    padding-right: 0 !important;
    padding-left: 10px !important;
    margin-bottom: 10px;
}
.item-box .title{
    background-color: #dff0ff;
    color: #2185d0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 3px 1px 5px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
    cursor: -webkit-grab;
    font-size: 13px;
}
.item-box .suffix{
    height: 27px;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    width: 99%;
    overflow: hidden;
}
.title .set{
    text-align: right;
}

</style>
